import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import ButtonGroupBasic from '../../examples/ButtonGroup/Basic';
import ButtonGroupNested from '../../examples/ButtonGroup/Nested';
import ButtonGroupSizes from '../../examples/ButtonGroup/Sizes';
import ButtonToolbar from '../../examples/ButtonGroup/Toolbar';
import ButtonToolbarBasic from '../../examples/ButtonGroup/ToolbarBasic';
import ButtonGroupVertical from '../../examples/ButtonGroup/Vertical';

export const query = graphql`
  query ButtonGroupQuery {
    ButtonGroup: componentMetadata(displayName: { eq: "ButtonGroup" }) {
      displayName
      ...ComponentApi_metadata
    }
    ButtonToolbar: componentMetadata(displayName: { eq: "ButtonToolbar" }) {
      displayName
      ...ComponentApi_metadata
    }
  }
`;

# Button groups

<p className="lead">
  Group a series of buttons together on a single line with the button
  group.
</p>

## Basic example

Wrap a series of `<Button>`s in a `<ButtonGroup>`.

<ReactPlayground codeText={ButtonGroupBasic} />

## Button toolbar

Combine sets of  `<ButtonGroup>`s into a `<ButtonToolbar>` for more complex components.

<ReactPlayground codeText={ButtonToolbarBasic} />

Feel free to mix input groups with button groups in your toolbars.
Similar to the example above, you’ll likely need some utilities though
to space things properly.

<ReactPlayground codeText={ButtonToolbar} />

## Sizing

Instead of applying button sizing props to every button in a group, just
add  `size ` prop to the  `<ButtonGroup>`.

<ReactPlayground codeText={ButtonGroupSizes} />

## Nesting

You can place other button types within the
`<ButtonGroup>` like `<DropdownButton>`s.

<ReactPlayground codeText={ButtonGroupNested} />

## Vertical variation

Make a set of buttons appear vertically stacked rather than
horizontally, by adding `vertical` to the `<ButtonGroup>`.
 __Split button dropdowns are not supported here.__

<ReactPlayground codeText={ButtonGroupVertical} />

## API

<ComponentApi metadata={props.data.ButtonGroup} />
<ComponentApi metadata={props.data.ButtonToolbar} />


